<template>
    <div class="jianzhan-content">
        <Crumb name="Equipment"/>
        <div class="content">
            <Search>
                <el-button icon="el-icon-plus" type="primary"  size="small" class="input" @click="
                                        clear()
                                        dialogVisible = true
                                    ">Add Equipment</el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="equipmentList.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                        row-key="id"
                        border
                        stripe
                >
                    <el-table-column prop="belongCompany" label="Company"/>
                    <el-table-column prop="brand" label="Brand"/>
                    <el-table-column prop="contract" label="Contract No"/>
                    <el-table-column prop="deliveryDate" label="Delivery Date"/>
                    <el-table-column prop="engine" label="Engine"/>
                    <el-table-column prop="equipmentType" label="Equipment Type"/>
                    <el-table-column prop="model" label="model"/>
                    <el-table-column prop="plateNum" label="Plate Num"/>
                    <el-table-column prop="sn" label="sn"/>
                    <el-table-column prop="projectName" label="Project"/>
                    <el-table-column label="Operate" width="220">
                        <template slot-scope="equipment">
                            <el-button size="small" type="primary" @click="openDialog(equipment.row)">Modify</el-button>
                            <el-button size="small" type="danger" @click="deleteEquipment(equipment.row)">Delete</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination
                            background
                            :page-size="pageSize"
                            @current-change="changePage"
                            layout="prev, pager, next"
                            :total="total"/>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" title="Equipment" width="80%">
            <el-form label-width="150px">
                <el-form-item label="Service Num">
                    <el-input class="my-input" v-model="equipment.serviceNum"/>
                </el-form-item>
                <el-form-item label="Delivery Date">
                    <el-date-picker class="my-input" size="small" v-model="equipment.deliveryDate" value-format="yyyy-MM-dd"/>
                </el-form-item>
                <el-form-item label="Contract">
                    <el-input v-model="equipment.contract" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item label="Equipment Type">
                    <el-input v-model="equipment.equipmentType" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item label="Brand">
                    <el-input v-model="equipment.brand" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item label="sn">
                    <el-input v-model="equipment.sn" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item label="Engine">
                    <el-input v-model="equipment.engine" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item label="Model">
                    <el-input v-model="equipment.model" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item label="Belong Company">
                    <el-input v-model="equipment.belongCompany" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item label="Plate Num">
                    <el-input v-model="equipment.plateNum" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item label="Project">
                    <el-select v-model="equipment.projectId" size="small" class="my-input">
                        <el-option v-for="item in projectList" :key="item.id" :value="item.id" :label="item.projectName"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitForm">Confirm</el-button>
                    </span>
        </el-dialog>

    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import Search from '../../components/common/search'
    import {getEquipment,getProject,addEquipment,modEquipment,deleteEquipment} from "../../api/service";
    import mixins from '../../util/mixins'
    import {ERROR_OK} from "../../util/config";


    export default {
        name: "equipment",
        mixins: [mixins],
        data() {
            return {
                equipmentList: [],
                projectList:[],
                dialogVisible:false,
                equipment:{
                    serviceNum:'',
                    deliveryDate:'',
                    contract:'',
                    equipmentType:'',
                    brand:'',
                    sn:"",
                    engine:'',
                    model:'',
                    belongCompany:'',
                    plateNum:'',
                    projectId:''

                }
            }
        },
        created() {
            this.getEquipment();
            this.getProject();
        },
        methods: {
            async deleteEquipment(equipment){
                this.$confirm(
                    'Do you want to delete this equipment?'
                ).then(async ()=>{
                    const {status} = await deleteEquipment(equipment.id);
                    if (status === ERROR_OK) {
                        const id = this.equipmentList.findIndex(item => item.id === equipment.id);
                        this.equipmentList.splice(id,1);
                    }
                }).catch(()=>{})
            },
            async submitForm(){
                const {serviceNum,deliveryDate,contract,equipmentType,brand,sn,engine,model,belongCompany,plateNum,projectId,id} = this.equipment;
                if (id) {
                    const {status } = await modEquipment({serviceNum,deliveryDate,contract,equipmentType,brand,sn,engine,model,belongCompany,plateNum,projectId,id});
                    if(status === ERROR_OK) {
                        this.$notify.success('Modify successfully');
                    } else {
                        this.$notify.error('Please Retry')
                    }
                    this.clear();
                    this.dialogVisible = false
                } else {
                    const {status} = await addEquipment({serviceNum,deliveryDate,contract,equipmentType,brand,sn,engine,model,belongCompany,plateNum,projectId})
                    if(status === ERROR_OK) {
                        this.$notify.success('Add successfully');
                        this.getEquipment()
                    } else {
                        this.$notify.error('Please Retry')
                    }
                    this.clear();
                    this.dialogVisible = false
                }
            },
            async getEquipment() {
                const {status, data} = await getEquipment();
                if (status === ERROR_OK) {
                    this.equipmentList = data.reverse();
                    this.total = data.length
                } else {
                    this.$notify.warning('No data');
                    this.equipmentList = []
                }
            },
            async getProject(){
                const {status,data} = await getProject();
                if(status === ERROR_OK) {
                    this.projectList = data;
                }
            },
            clear(){
                this.equipment = {
                    serviceNum:'',
                    deliveryDate:'',
                    contract:'',
                    equipmentType:'',
                    brand:'',
                    sn:"",
                    engine:'',
                    model:'',
                    belongCompany:'',
                    plateNum:'',
                    projectId:'',
                    id:''

                }
            },
            openDialog(item){
                this.equipment = item;
                this.dialogVisible = true
            },
            download(){
                const url = process.env.NODE_ENV === 'production' ? 'http://47.100.240.34:8093' : 'http://192.168.1.204:8080';
                window.open(url+`/statistical_report/export_excel.do?years=${this.years}&months=${this.months}`);
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    .content {
        @include content
    }
</style>